// 获取本地储存里面的CMSTOKEN
// 如果没有登录 不能访问首页Vue路由导航守卫
const token = localStorage.getItem("CMSTOKEN");
if (!token) {
  alert("你还没登陆呢");
  location.href = "./login.html";
}
/* 学员信息页面思路分析
1.默认加载学员信息列表 
2.添加学员 ：bootstrap模态框
3.省市县三级联动
4.确认添加 : 发送ajax请求
5.重置添加弹窗
6.删除学员信息
7.修改学员信息

本页面三个难点
难点1 ： 省市县三级联动 逻辑复杂
难点2 ： 表单较多，需要单独封装函数获取参数
难点3 ： 新增和编辑复用一个模态框， 一个按钮实现两种业务
    新增 ： (1)获取表单数据 (2)发送新增ajax请求
    编辑 ： (1)将点击的当前数据渲染到表单上 (2)获取表单数据 (3)发送编辑ajax请求
*/
/*打开页面 发送Ajax请求 获取所有成绩
1.封装函数 getStudentList
2.在函数里面发送ajax请求
3.数据是否请求成功
4.将数据渲染到页面上面 服务器响应的是对象*/
const tbody = document.querySelector("tbody");
const getStudentList = () => {
  axios({
    url: "/student/list",
  }).then(({ data: res }) => {
    console.log(res)
    if (res.code !== 0) return Toast.fail(res.message);
    Toast.success(res.message);
    document.querySelector("tbody").innerHTML = res.data
      .map((item) => {
        return `
            <tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province + item.city + item.county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm edit" data-id="${item.id
          }">修改</button>
          <button type="button" class="btn btn-danger btn-sm del" data-id="${item.id
          }">删除</button>
        </td>
      </tr>
            `;
      })
      .join("");
  });
};
getStudentList();

/*删除学员信息
1.使用事件委托给tbody注册事件
2.判断点击是不是删除按钮
3.发送ajax
4.成功重新渲染页面*/
tbody.addEventListener("click", function (e) {
  if (e.target.classList.contains("del")) {
    if (confirm("确认要删除吗")) {
      axios({
        url: "/student/delete",
        method: "DELETE",
        params: {
          id: e.target.dataset.id,
        },
      }).then(({ data: res }) => {
        // console.log(res)
        if (res.code !== 0) return Toast.fail(res.message);
        Toast.success(res.message);
        getStudentList();
      });
    }
  }
});

// 点击添加学院 弹出模态框
// 获取添加学员模态框
const myModal = new bootstrap.Modal(document.querySelector('#addModal'))
// 获取添加学员的按钮 注册事件
document.querySelector('.btnAddStu').addEventListener('click', function () {
  myModal.show()
  // 调用省份
  getProvince()
  document.querySelector('.addModalLabel').innerHTML = '录入新学员'
  document.querySelector('.btnAddStudent').innerHTML = '确认添加'
  document.querySelector('.add-form').reset()
  document.querySelector('[name=city]').innerHTML = `<option>--市--</option>`
  document.querySelector('[name=county]').innerHTML = `<option>--区县--</option>`
  // 删除按钮身上的自定义属性
  document.querySelector('.btnAddStudent').removeAttribute('data-id')

})
// 省市区 三级联动
//   打开模态框 发送请求 获取所有的省份 建议封装函数
const province = document.querySelector('[name="province"]')
const city = document.querySelector('[name="city"]')
const county = document.querySelector('[name="county"]')
const getProvince = () => {
  axios({
    url: '/geo/province'
  }).then(({ data: res }) => {
    province.innerHTML = '<option selected value="">--省--</option>' + res.map(item =>
      `
            <option value="${item}">${item}</option>
            `).join('')
  })
}

province.addEventListener('change', function () {
  // 解决bug 省发生改变 影响城市将区县里面的
  county.innerHTML = '<option selected value="">--区--</option>'
  axios({
    url: '/geo/city',
    params: {
      pname: this.value
    }
  }).then(({ data: res }) => {
    city.innerHTML = '<option selected value="">--市--</option>' + res.map(item =>
      `
            <option value="${item}">${item}</option>
            `).join('')
  })
})
city.addEventListener('change', function () {
  axios({
    url: '/geo/county',
    params: {
      pname: province.value,
      cname: this.value
    }
  }).then(({ data: res }) => {
    county.innerHTML = '<option selected value="">--区--</option>' + res.map(item =>
      `
            <option value="${item}">${item}</option>
            `).join('')
  })
})

/*添加学员
  1.获取add-form表单 注册submit事件
  2.阻止表单的默认行为
  3.获取用户输入的数据
  4.发送ajax
  5.判断数据是否请求成功
  6.重新渲染 清空表单 关闭模态框*/
document.querySelector('.add-form').addEventListener('submit', function (e) {
  e.preventDefault()
  // 根据input标签获取输入框
  const data = serialize(this, { hash: true })
  // 获取按钮身上的自定义属性值
  const id = this.querySelector('.btnAddStudent').dataset.id
  // if (id) {
  //   data.id = id
  //   // 修改
  //   axios({
  //     url: '/student/update',
  //     method: 'put',
  //     data
  //   }).then(({ data: res }) => {
  //     if (res.code !== 0) return Toast.fail(res.message)
  //     Toast.success(res.message)
  //     getStudentList()//渲染
  //     this.reset()//表单重置
  //     myModal.hide()//消除弹窗
  //   }).catch(err => {
  //     Toast.fail(err.response.data.message)
  //   })
  // } else {
    let url = '/student/add'
    let method = 'post'
    if(id){
      data.id = id
      url = '/student/update'
      method = 'put'
    }
    axios({
      url,
      method,
      data
    }).then(({ data: res }) => {
      if (res.code !== 0) return Toast.fail(res.message)
      Toast.success(res.message)
      getStudentList()//渲染
      this.reset()//表单重置
      myModal.hide()//消除弹窗
    }).catch(err => {
      Toast.fail(err.response.data.message)
    })
  })

/*点击修改按钮 显示模态框
1.使用事件委托给修改注册事件
2.判断点击是否是修改按钮
3.显示模态框
4.修改‘录入新学员’===> 修改学员信息 修改‘确认添加’ ===> ‘确认修改’
5.发送Ajax获取对应学员的信息
6.数据回显
*/
tbody.addEventListener('click', function (e) {
  if (e.target.classList.contains('edit')) {
    myModal.show()
    document.querySelector('.addModalLabel').innerHTML = '修改学员信息'
    document.querySelector('.btnAddStudent').innerHTML = '确认修改'
    // 获取自定义属性的值
    const id = e.target.dataset.id
    // 获取所有省份 调用代码 ajax外
    getProvince()
    axios({
      url: '/student/one',
      params: {
        id
      }
    }).then(({ data: res }) => {
      if (res.code !== 0) return Toast.fail(res.message)
      // for(let k in res.data){
      //   // 属性选择器 根据HTML标签属性 找到对应元素
      //   // [attr]根据属性名找到对应的元素
      //   // [attr=value]要求属性的属性值一定是某个值才可以匹配到对应的元素
      //   const input = document.querySelector(`[name=${k}]`)
      //   if(input){
      //     input.value = res.data[k]
      //   }
      // }
      document.querySelector('[name=name]').value = res.data.name
      document.querySelector('[name=age]').value = res.data.age
      document.querySelector('[name=group]').value = res.data.group
      document.querySelector('[name=phone]').value = res.data.phone
      document.querySelector('[name=salary]').value = res.data.salary
      document.querySelector('[name=truesalary]').value = res.data.truesalary
      // 如果确认是编辑学生还是添加学生
      // 如果是编辑学生给确认修改的按钮 添加一个自定义属性 属性值 就是当前被修改的id值
      document.querySelector('.btnAddStudent').dataset.id = res.data.id
      if (res.data.sex === '男') {
        // 需要获取name=sex的dom元素
        document.querySelectorAll('[name=sex]')[0].checked = true
      } else {
        document.querySelectorAll('[name=sex]')[1].checked = true
      }
      // 让其默认显示黑龙江省
      document.querySelector('[name=province]').value = res.data.province
      // 显示市
      document.querySelector('[name=city]').innerHTML = `<option value="${res.data.city}" selected>${res.data.city}</option>`
      // 显示区
      document.querySelector('[name=county]').innerHTML = `<option value="${res.data.county}" selected>${res.data.county}</option>`
    })
  }
})
/*var myModalEl = document.getElementById('addModal')
myModalEl.addEventListener('hidden.bs.modal',function(event){
  do something...
  console.log(myModalEl)
  // 找到表单将表单里面的数据清空
})*/